<template>
  <view>
    <u-form
      ref="uForm"
      :model="form"
      label-align="left"
      label-width="200"
      style="background: white; padding: 0 30upx"
    >
      <u-form-item label="旧密码" required prop="usedPassword">
        <u-input
          v-model="form.usedPassword"
          placeholder="请输入旧密码"
          type="password"
        />
      </u-form-item>
      <u-form-item label="新密码" required prop="newPassword">
        <u-input
          v-model="form.newPassword"
          placeholder="请输入新密码"
          type="password"
        />
      </u-form-item>
      <u-form-item label="确认新密码" required prop="confirmNewPassword">
        <u-input
          v-model="form.confirmNewPassword"
          placeholder="请再次输入新密码"
          type="password"
        />
      </u-form-item>
    </u-form>
    <view style="padding: 50rpx">
      <u-button type="primary" @click="submit">确认</u-button>
    </view>
    <view>
      <u-toast ref="uToast" />
    </view>
  </view>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  data() {
    return {
      form: {
        usedPassword: '',
        newPassword: '',
        confirmNewPassword: ''
      },
      rules: {
        usedPassword: [
          {
            required: true,
            message: '旧密码不能为空',
            trigger: ['change', 'blur']
          },
          {
            // 自定义验证函数，见上说明
            validator: (rule, value, callback) => {
              if (value !== 'admin') {
                if (value.length !== 8) return false
              }
              return true
            },
            message: '新密码长度8个字符',
            // 触发器可以同时用blur和change
            trigger: ['change', 'blur']
          }
        ],
        newPassword: [
          {
            required: true,
            message: '新密码不能为空',
            trigger: ['change', 'blur']
          },
          {
            // 自定义验证函数，见上说明
            validator: (rule, value, callback) => {
              if (value !== 'admin') {
                if (value.length !== 8) return false
              }
              return true
            },
            message: '新密码长度8个字符',
            // 触发器可以同时用blur和change
            trigger: ['change', 'blur']
          },
          {
            // 自定义验证函数，见上说明
            validator: (rule, value, callback) => {
              if (value !== 'admin') {
              // 至少包含数字、字母和特殊符号中的两种
                const hasDigit = /\d/.test(value)
                const hasLetter = /[a-zA-Z]/.test(value)
                const hasSpecialChar = /[!@#$%^&*()\-_=+{};:,<.>/]/.test(value)
                const typesCount =
                  (hasDigit ? 1 : 0) +
                  (hasLetter ? 1 : 0) +
                  (hasSpecialChar ? 1 : 0)
                if (typesCount < 2) return false
              }
              return true
            },
            message: '密码必须包含数字、字母和特殊符号中的两种',
            // 触发器可以同时用blur和change
            trigger: ['change', 'blur']
          }
        ],
        confirmNewPassword: [
          {
            required: true,
            message: '新密码不能为空',
            trigger: ['change', 'blur']
          },
          {
            // 自定义验证函数，见上说明
            validator: (rule, value, callback) => {
              if (value !== 'admin') {
                if (value.length !== 8) return false
              }
              return true
            },
            message: '新密码长度8个字符',
            // 触发器可以同时用blur和change
            trigger: ['change', 'blur']
          },
          {
            // 自定义验证函数，见上说明
            validator: (rule, value, callback) => {
              if (value !== this.form.newPassword) return false
              return true
            },
            message: '两次输入的密码不一致',
            // 触发器可以同时用blur和change
            trigger: ['change', 'blur']
          }
        ]
      }
    }
  },
  methods: {
    ...mapMutations({
      firstLogin: 'user/first_login'
    }),

    submit() {
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          this.$u.api
            .updatePassword({
              oldPassword: this.form.usedPassword,
              newPassword: this.form.newPassword
            })
            .then((res) => {
              if (res.code === 200) {
                this.$refs.uToast.show({ title: '密码修改成功！', type: 'success' })
                // 保存新的token 关闭首次登录验证
                uni.setStorageSync('token', res.data.pageItems)
                // this.firstLogin('')
                setTimeout(() => {
                  uni.clearStorageSync()
                  uni.setStorageSync('baseURL', uni.getStorageSync('baseURL'))
                  uni.redirectTo({
                    url: '/pages/login/index'
                  })
                }, 1000)
              }
            })
        } else {
          console.log('验证失败')
        }
      })
    }
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules)
  }
}
</script>

<style scoped></style>
